<template>
  <div class="header">
    <el-card>
      <div class="head_btn">
        <el-button size="mini">管理员列表</el-button>
        <el-button size="mini" icon="el-icon-plus" @click="dialogFormVisible=true">添加管理员</el-button>
      </div>
      <el-table :data="tableData" border size="mini" stripe
                :header-cell-style="{textAlign:'center',backgroundColor:'#e4eaec'}"
                :cell-style="{textAlign: 'center'}">
        <el-table-column prop="username" label="用户名"/>
        <el-table-column prop="name" label="用户组名"/>
        <el-table-column prop="createTime" label="创建时间"/>
        <el-table-column prop="updateTime" label="更新时间"/>

        <el-table-column label="操作" width="200px">
          <template slot-scope="scope">
            <el-button size="mini" type="info" plain>修改权限或密码</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!--添加管理员对话框-->
    <el-dialog :visible.sync="dialogFormVisible" width="35%">
      <template #title>
        <span class="dialogTitle">添加管理员：</span>
      </template>

      <el-form :model="addForm" size="mini" label-width="80px" label-position="left">
        <el-form-item label="组别">
          <el-radio-group v-model="addForm.groups">
            <el-radio :label="1">超级管理员</el-radio>
            <el-radio :label="2">客服</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="姓名">
          <el-input v-model="addForm.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model="addForm.phone" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="addForm.email" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="初始密码">
          <el-input v-model="addForm.password" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-radio-group v-model="addForm.state">
            <el-radio :label="1">允许登录</el-radio>
            <el-radio :label="0">禁止登录</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false" size="mini">提交</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
export default {
  name: 'Dashboard',
  data() {
    return {
      tableData: [
        {username: 'admin', name: '超级管理员', createTime: '2021-12-23 14:30:00', updateTime: '2021-12-27 09:27:36'},
        {username: 'admin01', name: '客服', createTime: '2021-12-23 14:30:00', updateTime: '2021-12-27 09:27:36'},
      ],

      dialogFormVisible: false,
      addForm: {
        groups: 1,
        state: 1,
      },

    }
  },

}
</script>

<style lang="scss" scoped>
.header {
  margin: 30px;

  .head_btn {
    .el-button:nth-child(1) {
      background-color: #3cb3be;
      color: white;
    }

    .el-button:nth-child(2) {
      background-color: #437eb1;
      color: white;
    }
  }

  .el-table {
    margin-top: 15px;

    .el-button {
      background-color: #28acb8;
      color: white;
    }

  }
}

.el-dialog {
  .dialog-footer {
    .el-button {
      background-color: #2f71a9;
      color: white;
    }
  }
}
</style>
